<template>
  <div id="productDetail">
    <el-dialog title="商品信息" :visible.sync="visible" top="0.5rem" :lock-scroll="false" :show-close="false" :close-on-click-modal="false">
      <el-form ref="proForm" :model="item" label-width="100px">
        <el-row>
          <el-col :span="24">
          <el-form-item style="margin-left:0px;">
          <div class="avatarlist" style="display:grid;justify-content:start">
            <img v-if="item.image" :src="item.image" width="400" height="300">
            <img v-else src="../../../assets/img/bgImg/plants1.png" width="400" height="300">
          </div>
        </el-form-item>


            <el-row type="flex" justify="left">
              <el-form-item>
                <div><h2>{{item.title}}</h2></div>
              </el-form-item>
            </el-row>
            <el-row type="flex" justify="left">
              <el-form-item>
                <div style="text-align: left">商品介绍：{{item.remark}}</div>
              </el-form-item>
            </el-row>
            <el-row type="flex" justify="left">
              <el-form-item>
                <div style="text-align: left">商家：{{create_user_name}}</div>
              </el-form-item>
            </el-row>
            <el-row type="flex" justify="left">
              <el-form-item>
                <div style="text-align: left">上架时间：{{item.created_time}}</div>
              </el-form-item>
            </el-row>
            <el-row type="flex" justify="left">
              <el-form-item>
                <div style="text-align: left;color: #ff852f;font-size: large">￥{{item.price}}</div>
              </el-form-item>
            </el-row>
          </el-col>
        </el-row>

      </el-form>
      <span slot="footer">
      <el-button type="primary" @click="resetForm('empForm')">取消</el-button>
      <el-button type="success" @click="submitForm('empForm')">点击下单</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>
import {getSeller, getSellerById} from "@/api/shop";

export default {
  name: "ProductDetail",
  data(){
    return{
      visible:false,
      item:{
        id:'',
        category_id:'',
        item_type:'',
        title:'',
        sell_point:'',
        price:'',
        num:'',
        image:'',
        status:'',
        priority:'',
        remark:'',
        created_time:'',
        created_user_id:'',
        modified_time:'',
        modified_user_id:''
      },
      create_user_name:''
    }
  },

  methods:{
    open(item){
      this.visible=true
      this.item.id=item.id
      this.item.category_id=item.categoryId
      this.item.image=item.image
      this.item.remark=item.remark
      this.item.created_user_id=item.createdUserId
      this.item.price=item.price
      this.getSellerName()
      console.log(this.item)

    },
    getSellerName(){
      getSellerById(this.item.created_user_id).then(res=>{
        this.create_user_name=res.nickName
      })
    },
    submitForm (plantForm) {
      this.$refs.proForm.validate(valid => {
        if (valid) {
          this.$confirm('确认下单吗？', '是否下单', {
            cancelButtonText: '取消',
            confirmButtonText: '确认',
            lockScroll: false,
            type: 'warning'
          }).then(() => {
            console.log('this.fileList', this.fileList)
            this.$emit('confirmData', this.item,this.fileList)
            this.resetForm('proForm')
          })
        }
      })
    },
    resetForm (plantForm) {
      this.$nextTick(() => {
        this.$refs.plantForm.clearValidate()
      })
      this.item = {}
      this.visible = false
    }
  }
}
</script>

<style scoped>

</style>